<template>
    <div class="container">
        <my-header></my-header>
        <el-main class="el-main">
            <el-card class="main-card" shadow="never">
                <!-- 面包屑 -->
                <el-breadcrumb separator="/" class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{$route.query.sectionName}}</el-breadcrumb-item>
                </el-breadcrumb>
                <!-- 帖子列表 -->
                <el-button type="primary" icon="el-icon-edit" @click="handlePostClick">我要发帖</el-button>
                <el-table class="tableList"
                    style="width: 100%"
                    :data="postList">
                    <!-- .slice((currentPage-1)*pageSize,currentPage*pageSize) -->
                    <el-table-column
                        prop="title"
                        label="帖子标题"
                        >
                        <template slot-scope="scope">
                            <router-link :to="'/detail?id='+scope.row.id+'&sectionName='+$route.query.sectionName">{{scope.row.title}}</router-link>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="time"
                        label="发布时间"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        prop="author"
                        label="作者"
                        width="120">
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                    class="pagination"
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="pageSize"
                    :current-page="currentPage"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </el-card>
        </el-main>
    </div>
</template>

<script>
import MyHeader from "../../components/MyHeader"
import axios from 'axios'
import getUrl from "../../assets/js/getPath"

export default {
    name:"List",
    components:{
        MyHeader
    },
    data(){
        return{
            sectionId:'',
            sectionName:this.$route.query.sectionName,
            postList:[
                {'id':'000001','title':'四六级报名开始啦1','author':'zijeak','time':'2020/10/13 22:06'},
                {'id':'000002','title':'四六级报名开始啦2','author':'zijeak','time':'2020/10/13'},
                {'id':'000003','title':'四六级报名开始啦3','author':'zijeak','time':'2020/10/13'},
                {'id':'000001','title':'四六级报名开始啦4','author':'zijeak','time':'2020/10/13'},
                {'id':'000002','title':'四六级报名开始啦5','author':'zijeak','time':'2020/10/13'},
                {'id':'000003','title':'四六级报名开始啦6','author':'zijeak','time':'2020/10/13'},
                {'id':'000001','title':'四六级报名开始啦7','author':'zijeak','time':'2020/10/13'},
                {'id':'000002','title':'四六级报名开始啦8','author':'zijeak','time':'2020/10/13'},
                {'id':'000003','title':'四六级报名开始啦9','author':'zijeak','time':'2020/10/13'},
                {'id':'000001','title':'四六级报名开始啦10','author':'zijeak','time':'2020/10/13'},
                {'id':'000002','title':'四六级报名开始啦11','author':'zijeak','time':'2020/10/13'},
                {'id':'000003','title':'四六级报名开始啦12','author':'zijeak','time':'2020/10/13'},
                {'id':'000002','title':'四六级报名开始啦8','author':'zijeak','time':'2020/10/13'},
                {'id':'000003','title':'四六级报名开始啦9','author':'zijeak','time':'2020/10/13'},
                {'id':'000001','title':'四六级报名开始啦10','author':'zijeak','time':'2020/10/13'},
                {'id':'000002','title':'四六级报名开始啦11','author':'zijeak','time':'2020/10/13'},
                {'id':'000003','title':'四六级报名开始啦12','author':'zijeak','time':'2020/10/13'}
            ],
            pageSize:8,
            currentPage:1,
            total:100
        }
    },
    computed:{
        length:function(){
            return this.$data.postList.length;
        }
    },
    mounted(){
        this.$data.sectionId = this.$route.query.sectionId;
        this.getPostList();
    },
    watch:{
        // 每当页码发生改变，重新请求数据
        currentPage:function(){
            this.getPostList();
        }
    },
    methods:{
        handleCurrentChange:function(currentPage){
            console.log(currentPage);
            this.currentPage = currentPage;
        },
        getPostList:async function(){
            const params = {
                'boardid':this.sectionId,
                'pagenum':this.currentPage

            }
            console.log(params);
            let url = getUrl('postlist');
            try{
                const {data:res} = await axios.get(url,{params:params});
                if(res.meta.status !== 200){
                    return this.$message.error(res.meta.msg);
                }else{
                    this.postList = res.data.postlist;
                    this.total = res.data.total;
                    //this.$message.success(res.meta.msg);
                }
            }catch(e){
                this.$message.error("请求出错");
            }
        },
        handlePostClick:function(){
            this.$router.push({name:'Post',params:{'sectionId':this.sectionId,'sectionName':this.sectionName}});
        }
    }
}
</script>


<style lang="scss" scoped>
.container,.el-main{
    width: 100%;
    background-color: #eee;
}
.main-card{
    width:80%;
    margin: 0 auto;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
}
.tableList{
    margin-top:20px;
}
.breadcrumb{
    margin-bottom:20px;
}
.pagination{
    margin-top:20px;
}
</style>